<template>
	<view id="getIp">
		<HeaderC txt="提取"></HeaderC>
		<view-tabbar :current="3" v-if="isTabar"></view-tabbar>
		<view class="getApi" v-if="showLink">
			<view class="item" v-if="isLogin">
				<text class="title">请选择订单</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue" :options='orderData' @selectOne="selectOne">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="item" v-if="!isLogin" @click="islogin">
				<text class="title">请选择订单</text>
				<view class="iblock" >
					<view class="content" >
						<text>请选择   > </text>
					</view>
				</view>			
			</view>
			<view class="item"  v-if="cshow">
				<text class="title">选择城市</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue4" :options='cityData' @selectOne="selectOne4">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="item" v-if="nshow">
				<text class="title">提取数量</text>
				<view class="iblock">
					<view class="block reduce" @click="reduce">-</view>
					<view class="block">
						<input type="number" value="" v-model="ruleForm.count" @input="inputN" />
					</view>
					<view class="block add" @click="add">+</view>
				</view>
			</view>
			<view class="item">
				<text class="title">数据格式</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue2" :options='[{value:0,label:"JSON"},{value:1,label:"TXT"}]' @selectOne="selectOne2">
						</easy-select>
					</view>
				</view>		
			</view>
			<view class="item" v-if="sshow">
				<text class="title">选择协议</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue3" :options='[{value:1,label:" HTTP/HTTPS"},{value:2,label:"Socket5"}]' @selectOne="selectOne3">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="xuNi">
				<text class="title">去重方式</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue6" :options='[{value:0,label:"智能去重"},{value:1,label:"24小时去重"}]' @selectOne="selectOne6">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="showComType">
				<text class="title">有效时间</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue5" :options='[{value:0,label:"不获取"},{value:1,label:"获取"}]' @selectOne="selectOne5">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="showComType">
				<text class="title">去重方式</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue6" :options='[{value:0,label:"智能去重"},{value:1,label:"24小时去重"}]' @selectOne="selectOne6">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="xuNi">
				<text class="title">地区选择</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue8" :options='[{value:0,label:"全国随机"},{value:1,label:"指定城市"}]' @selectOne="selectOne8">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="allIP">
				<text class="title">地区选择</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue9" :options='[{value:0,label:"全国随机"},{value:1,label:"指定城市"}]' @selectOne="selectOne9">
						</easy-select>
					</view>
				</view>
			</view>
			<view class="item" v-if="showComType">
				<text class="title">地区选择</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue7" :options='[{value:0,label:"全国随机"},{value:1,label:"指定城市"}]' @selectOne="selectOne7">
						</easy-select>
					</view>
				</view>
			</view>
			<!-- <view class="item" v-show="showCity">
				<text class="title">地区选择</text>
				<view class="iblock">
					<view class="" @click="chooseCity(1)">
						<text v-if="ruleForm.cityIP == ''">请选择</text>
						<text v-if="ruleForm.cityIP != ''">{{ ruleForm.cityIP }}</text>
					</view>
				</view>
			</view> -->
			<view class="item" v-if="showCity2">
				<text class="title">选择省份</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue11" :options='optionsProvince' @selectOne="selectOne11">
						</easy-select>
					</view>
				</view>						
			</view>
			<view class="item" v-if="showCity3">
				<text class="title">选择城市</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue12" :options='optionsProvince2' @selectOne="selectOne12">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="item" v-if="cshowTYpe == true && this.poolType == 1">
				<text class="title">选择城市</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue14" :options='cityData2' @selectOne="selectOne14">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="item" v-if="cshowTYpe == true && this.poolType == 2">
				<text class="title">选择城市</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue13" :options='cityData3' @selectOne="selectOne13">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="item" v-if="allIP">
				<text class="title">域名是否顺序</text>
				<view class="iblock">
					<view class="content" @click="useOutClickSide">
					    <easy-select ref="easySelect" size="medium" :value="selecValue10" :options='[{value:1,label:"是"},{value:2,label:"否"}]' @selectOne="selectOne10">
						</easy-select>
					</view>
				</view>			
			</view>
			<view class="box-item" v-if="showCityThree">
			    <picker class="item-picker"
			            mode="multiSelector"
			            range-key="label"
			            @change="classifyChange"
			            @columnchange="columnchange"
			            :value="classifyIndex"
			            :range="classifyArr">
			        <!-- <view>{{ name }}</view> -->
			    		<input type="text" v-model="label" />
			    </picker>     
			</view>	
			<view class="item" v-show="showCity">
				<text class="title">选择城市</text>
				<view class="iblock iblock2">
					<uni-data-picker :localdata="items" self-field="lable" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
				</view>
			</view>
			<view class="btn">
				<button type="" @click="submit">生成API链接</button>
			</view>
		</view>

		<view class="getApi2" v-show="showLink1">
			<div class="copy_t">请复制下面的链接地址，在新的浏览器或标签页打开并查看</div>
			<view class="content">
				<textarea class="textarea" type="text" value="" placeholder="此处生成API链接" v-model="link"/>
			</view>
			<view class="btn">
				<button type="" @click="copy">复制链接</button>
				<button type="default" @click="goBack">返回提取页面</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTabar:false,
				items:[],
				dataSource:[],
				label: '请选择城市',
				classifyArr:[[], []], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引
				childArr:[], // 二级分类数据源
				overData:[],
				orderData: [],
				      cityData: [],
				      optionsProvince: [],
				      optionsProvince2: [],
				      cityData2: [],
				      cityData3: [],
				      cityG:[],
				      ruleForm: {
				        appkey: 0,
				        format: "0",
				        expiryDate: "0",
				        count: 20,
				        area: null,
				        proxyType: "1",
				        citys: [],
				        isCheck: "0",
				        isCheck2: "0",
				        isCheck15: "0",
				        isChong: "0",
				        cityIP: "",
				        allprovince: "",
				        allprovinceCity: "",
				        address: "",
				        isDate: "0",
				        domainName: "1",
				        city7: 0,
				        city72: 0,
				      },
				      showOrder: 0,
				      link: "",
				      vmax: 10,
				      noorder: false,
				      nshow: false,
				      cshow: false,
				      sshow: false,
				      xuNi: false,
				      allIP: false,
				      secret: null,
				      showSocket5: false,
				      cshowTYpe: false,
				      form: {
				        multiple: 5,
				      },
				      showLink: true,
				      showLink1: false,
				      //城市数据
				      // selectedOptions: [], //存放默认值
				      //options: [], //存放城市数据
				      showCity: false,
				      showCity2: false,
				      showCity3: false,
				      showSocket5: false,
				      showChooseCity: false,
				      radio2: "",
				      searchString: "",
				      hidden: false,
				      showCity1: true,
				      XnCity: [],
				      XnCity02: [],
				      selectedOptionsThree: [],
				      apiPlusListThree: [],
				      showCityThree: false,
				      showComType: false,
				      poolType: 1,
					  selecValue:'请选择',
					  selecValue2:'JSON',
					  selecValue3:'HTTP/HTTPS',
					  selecValue4:'',
					  selecValue5:'不获取',
					  selecValue6:'智能去重',
					  selecValue7:'',
					  selecValue8:'全国随机',
					  selecValue9:'全国随机',
					  selecValue10:'是',
					  selecValue11:'',
					  selecValue12:'',
					  selecValue13:'随机分配',
					  selecValue14:'随机分配',
			};
		},
		watch: {
		    "ruleForm.area": function (newVal) {
		      this.vchange2();
		    },
		    "ruleForm.appkey": function (newVal) {
		      this.vchange(newVal);
		    },
		    "ruleForm.isCheck": function (newVal) {
		      this.cityChange();
			  console.log(1);
		    },
		    "ruleForm.isCheck2": function (newVal) {
		      this.cityChange2();
			  console.log(2);
		    },
		    "ruleForm.isCheck15": function (newVal) {
				console.log(3);
		      this.cityChange15();
			  this.getAllClassify()
		    },
		    "ruleForm.allprovince": function (newVal) {
				console.log(14214);
		      this.listProxyId();
		    },
		    radio2: function (newval, oldval) {
		      if (newval == "") {
		        return;
		      }
		      console.log("当前应取到的值：" + newval, "这是之前的值：" + oldval);
		      this.getRadio2Val(newval);
		    },
		  },
		onShow(){
			this.listArea()
			this.listStaticCity()
			this.listCxCity()
			this.listXnArea()
			this.listUseableOrder()
			this.vpnListProvince()
			this.vchange2()
			this.getUserInfo();
			// uni.hideTabBar({
			// 	animation: false
			// })
			// #ifdef MP-WEIXIN
				uni.hideTabBar({
					animation: false
				})
				this.isTabar=true
			// #endif
		},
		computed:{
			userInfo() {
			    return this.$store.state.userInfo;
			},
			isLogin(){
				return this.$store.state.isLogin;
			},
		},
		methods: {
			islogin(){
				console.log(13213);
				uni.navigateTo({
					url: "/pages/login/login"
				})	
			},
			selectOne(options) {
			    this.selecValue =options.label
				this.ruleForm.appkey=options.label
			},
			selectOne2(options) {
			    this.selecValue2 =options.label
				this.ruleForm.format=options.value
			},
			selectOne3(options) {
			    this.selecValue3 =options.label
				this.ruleForm.proxyType=options.value
			},
			selectOne4(options) {
				console.log(options);
			    this.selecValue4 =options.label
				this.ruleForm.are=options.value
			},
			selectOne5(options) {
			    this.selecValue5 =options.label
				this.ruleForm.isDate=options.value
			},
			selectOne6(options) {
			    this.selecValue6 =options.label
				this.ruleForm.isChong=options.value
			},
			selectOne7(options) {
			    this.selecValue7 =options.label
				this.ruleForm.isCheck15=options.value
			},
			selectOne8(options) {
			    this.selecValue8 =options.label
				this.ruleForm.isCheck=options.value
			},
			selectOne9(options) {
			    this.selecValue9 =options.label
				this.ruleForm.isCheck2=options.value
			},
			selectOne10(options) {
			    this.selecValue10 =options.label
				if(options.value==1){
					this.ruleForm.domainName=options.value
				}else{
					this.ruleForm.domainName=''
				}
			},
			selectOne11(options) {
			    this.selecValue11 =options.value
				this.ruleForm.allprovince=options.value
			},
			selectOne12(options) {
			    this.selecValue12 =options.value
				this.ruleForm.allprovinceCity=options.value
			},
			selectOne13(options) {
			    this.selecValue13 =options.city
				this.ruleForm.city72=options.cityid
			},
			selectOne14(options) {
			    this.selecValue14 =options.city
				this.ruleForm.city7=options.cityId
			},
			useOutClickSide() {
			    this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			 // 获取数据源并分出一级二级
			getAllClassify() {
				this.dataSource=this.apiPlusListThree
			    let dataSource = this.dataSource.length;		
			    for (let i = 0; i < dataSource; i++) {
			        // 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
			        this.childArr.push(this.dataSource[i].children)
			    };
						
			    // 一级分类的数据源
			    this.classifyArr[0] = this.dataSource;
						
			    // 第一次打开时，默认给一级分类添加它的二级分类
			    this.classifyArr[1] = this.childArr[0]
			},						
			// 选择商品分类
			classifyChange(e) {
			    let value = e.target.value;
			    this.classifyIndex = value;
				this.selectedOptionsThree=[]
			    if (this.classifyArr[0].length != 0) {
			        this.label = this.classifyArr[0][this.classifyIndex[0]].label
			        let value = this.classifyArr[0][this.classifyIndex[0]].value
					this.overData.push(value)
			    };
			    if (this.classifyArr[1].length != 0) {
			        this.label += '/' + this.classifyArr[1][this.classifyIndex[1]].label
			        let value2 =this.classifyArr[1][this.classifyIndex[1]].value
					this.overData.push(value2)
			    }
				this.selectedOptionsThree.push(this.overData)
			},						
			// 获取二级分类
			columnchange(e) {
			    // 当滚动切换一级分类时，为当前的一级分类添加它的子类
			    if (e.detail.column == 0) {
			        // #ifdef H5
			        // 在小程序中直接赋值无效  H5 可直接赋值
			        this.classifyArr[1] =  this.childArr[e.detail.value]
			        // #endif
						
			        // #ifdef MP-WEIXIN
			        // 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
			         this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
			        // #endif
			    }
			},            
			onchange(e) {
			    const value = e.detail.value
				this.ruleForm.cityIP=value[1].label
			},
			inputN(){
				if(this.ruleForm.count>this.vmax){
					this.ruleForm.count=this.vmax
				}
			},
			add(){	
				console.log(this.vmax);
				if(this.ruleForm.count<this.vmax){
					this.ruleForm.count=this.ruleForm.count+1
				}
			},
			reduce(){				
				if(this.ruleForm.count<=1){
					this.ruleForm.count=1
				}else{
					this.ruleForm.count=this.ruleForm.count-1
				}				
			},
			getNumber(){
				console.log(12134124,this.ruleForm.count); 
			},
			getRadio2Val(newval) {
		      this.showChooseCity = false;
		      this.showLink = true;
		      this.showLink1 = false;
		      // this.ruleForm.cityIP = newval.substring(0, newval.length - 1);
		      this.ruleForm.cityIP = newval;
		    },
			cityChange() {
		      if (this.ruleForm.isCheck == 1) {
		        this.XnCity = this.XnCity02;
		        this.showCity = true;
		      } else {
		        this.ruleForm.cityIP = "";
		        this.XnCity = [];
		        this.showCity = false;
		      }
		    },
		    cityChange2() {
		      if (this.ruleForm.isCheck2 == 1) {
		        this.showCity2 = true;
		        this.vpnListProvince();
		      }
		      if (this.ruleForm.isCheck2 == 0) {
		        this.showCity2 = false;
		        this.showCity3 = false;
		        this.ruleForm.allprovince = "";
		        this.ruleForm.allprovinceCity = "";
		      }
		    },
		    cityChange15() {
		      if (this.ruleForm.isCheck15 == 1) {
		        this.showCityThree = true;
		        this.apiPlusListThree=this.cityG
		      }
		      if (this.ruleForm.isCheck15 == 0) {
		        this.selectedOptionsThree = "";
		        this.selectedOptionsThree = [];
		        this.showCityThree = false;
		      }
		    },	
			vchange2(){
				let that = this;
			      that.cityData = [];
			      this.$store.dispatch("ListCity").then((response) => {
			        let data = response.data;
			        if (data.code == "0") {
			          let tar = data.obj;
			          tar.forEach((item) => {
			            that.cityData.push({
			              label: item.city,
			              value: item.cityId,
			            });
			          });
			        }
			      });	
			},
			listProxyId() {
			    let that = this;
			    this.ruleForm.allprovinceCity = "";
			    that.optionsProvince2 = [];
			    if (this.ruleForm.allprovince == "") {
			        return;
			    }
				this.$store
					.dispatch("ListProxyId",{province: this.ruleForm.allprovince,})
					.then((response) => {
						if (response.data.code == "0") {
						    that.showCity3 = true;
						    let tar = response.data.obj;
						    tar.forEach((item) => {
						      that.optionsProvince2.push({
						        value: item.city,
								label:item.city,
						      });
						    });
							console.log(that.optionsProvince2);
						}	
					})
					.catch(() => {});  
			},
			vpnListProvince(){
				let that=this
				this.$store
					.dispatch("VpnListProvince",{orderType:15})
					.then((response) => {
						if (response.data.code == "0") {
							that.optionsProvince=[]
						    let tar = response.data.obj;
						    tar.forEach((item) => {
						        that.optionsProvince.push({value: item,label:item});
						    });
						}	
					})
					.catch(() => {});
			},
			// 判断类型
		    isType(str) {
		      let res;
		      this.orderData.forEach((item, index) => {
		        if (item.value == str) {
		          res = item.type;
		        }
		      });
		      return res;
		    },
			// 返回代理池类型
		    isPool(str) {
		      let res;
		      this.orderData.forEach((item, index) => {
		        if (item.value == str) {
		          res = item.pool;
		        }
		      });
		      return res;
		    },	
			vchange(val){
				let tar = this.isType(val);
				let poll = this.isPool(val);
				if (poll != undefined) {
				   this.poolType = poll;
				}
				// 如果是不限量 拿取倍数
				let that = this;
				if (tar != 11) {
				   this.showCity = false;
				   this.showSocket5 = true;
				}
				if (tar != 15) {
				   that.showCityThree = false;
				}
				if (tar != 12) {
				   this.showCity2 = false;
				   this.showCity3 = false;
				   this.allIP = false;
				}
				if (tar == 1) {
				   that.sshow = true;
				   that.nshow = true;
				   that.cshow = false;
				   this.vmax = 200;
				   this.ruleForm.count = 10;
				   that.xuNi = false;
				   that.showComType = false;
				   that.cshowTYpe = false;
				} else if (tar == 3 || tar == 6) {
				   this.$store
				     .dispatch("SelectPickNum", {orderNo: that.ruleForm.appkey})
				     .then((response) => {
				       if (response.data.code == "0") {
				         this.$store.commit("SET_PICK", true);
				         that.vmax = response.data.obj;
				         that.ruleForm.count = response.data.obj;
				         that.nshow = true;
				         that.cshow = false;
				         that.sshow = true;
				         that.xuNi = false;
				         that.showComType = false;
				         that.cshowTYpe = false;
				       } else {
				         commit("SET_PICK", false);
				       }
				     })
				     .catch(() => {});
				 } else if (tar == 7) {
				   this.nshow = false;
				   this.cshow = false;
				   that.sshow = true;
				   that.xuNi = false;
				   that.showComType = false;
				   that.cshowTYpe = true;
				 } else if (tar == 5) {
				   this.nshow = false;
				   this.cshow = true;
				   that.sshow = true;
				   that.xuNi = false;
				   that.showComType = false;
				   that.cshowTYpe = false;
				 } else if (tar == 11) {
				   that.sshow = true;
				   that.nshow = true;
				   that.cshow = false;
				   this.vmax = 50;
				   this.ruleForm.count = 10;
				   that.xuNi = true;
				   that.ruleForm.isCheck = 0;
				   this.showSocket5 = false;
				   that.showComType = false;
				   that.cshowTYpe = false;
				   if (that.ruleForm.isCheck == 1) {
				     // this.showCity = true;
				   } else {
				   }
				 } else if (tar == 12) {
				   this.nshow = false;
				   this.cshow = false;
				   that.sshow = false;
				   that.xuNi = false;
				   that.allIP = true;
				   that.ruleForm.isCheck2 = 0;
				   that.showComType = false;
				   that.cshowTYpe = false;
				 } else if (tar == 15) {
				   this.vmax = 200;
				   this.ruleForm.count = 10;
				   this.nshow = true;
				   this.cshow = false;
				   that.sshow = true;
				   that.xuNi = false;
				   that.allIP = false;
				   that.ruleForm.isCheck15 = 0;
				   that.showComType = true;
				   that.cshowTYpe = false;
				 } else if (tar == undefined) {
				   this.nshow = false;
				   this.cshow = false;
				   that.sshow = false;
				   that.xuNi = false;
				   that.showComType = false;
				   that.cshowTYpe = false;
				 } else {
				   this.vmax = 50;
				   this.ruleForm.count = 20;
				   this.nshow = true;
				   this.cshow = false;
				   that.sshow = false;
				   that.xuNi = false;
				   that.showComType = false;
				   that.cshowTYpe = false;
				 }     
			},
			chooseCity(val) {
			      if (val == 1) {
			        this.showCity1 = false;
			        this.showChooseCity = true;
			        this.showLink = false;
			        this.showLink1 = false;
			      } else if (val == 2) {
			        this.showChooseCity = false;
			        this.showLink = true;
			        this.showLink1 = false;
			      }
			},
			getUserInfo() {
				let that = this;
				this.$store
				    .dispatch("GetInfo")
				    .then((response) => {
						this.secret = response.secret;
				    })
				    .catch(() => {});
			},
			copy(){
				uni.setClipboardData({
				  data:this.link,
				  success:()=>{
				    uni.showToast({
				      title:"复制成功"
				    })
				  }
				});			
			},
			goBack(){				
				this.showLink = true;
				this.showLink1 = false;
			},
			submit(){
				let res = this.ruleForm;
			    let tar = this.isType(res.appkey);
			    let pol = this.isPool(res.appkey);
			    let that = this;
				if (res.appkey == "") {
			        this.$store.commit("SET_ERRORINFORMATION", {
			          mes: "请选择提取订单",
			          icon: "error",
			        });
					return false;
			    }
				this.showLink = false;
				this.showLink1 = true;
				if (tar == 1) {
			        this.link =
			          "http://route.xiongmaodaili.com/xiongmao-web/api/glip?secret=" +
			          this.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&count=" +
			          res.count +
			          "&isTxt=" +
			          res.format +
			          "&proxyType=" +
			          res.proxyType;
				console.log(1,this.link);
			      } else if (tar == 3) {
			        if (pol == 1) {
			          this.link =
			            "http://route.xiongmaodaili.com/xiongmao-web/api/gbip?secret=" +
			            this.secret +
			            "&orderNo=" +
			            res.appkey +
			            "&count=" +
			            res.count +
			            "&isTxt=" +
			            res.format +
			            "&proxyType=" +
			            res.proxyType;
			        }
			        if (pol == 2) {
			          this.link =
			            "http://pandavip.xiongmaodaili.com/xiongmao-web/vip/gbip?secret=" +
			            this.secret +
			            "&orderNo=" +
			            res.appkey +
			            "&count=" +
			            res.count +
			            "&isTxt=" +
			            res.format +
			            "&proxyType=" +
			            res.proxyType;
			        }
			        if (pol == 3) {
			          this.link =
			            "http://route.xiongmaodaili.com/xiongmao-web/api/gbip?secret=" +
			            this.secret +
			            "&orderNo=" +
			            res.appkey +
			            "&count=" +
			            res.count +
			            "&isTxt=" +
			            res.format +
			            "&proxyType=" +
			            res.proxyType;
			        }
			      } else if (tar == 5) {
			        this.$store
			          .dispatch("ApplyMachine", 
					  {
						orderNo: res.appkey,
						secret: that.secret,
						area: that.ruleForm.area,
						})
			          .then((response) => {
						  console.log(555,response);
			            if (response.code == "0") {
			              if (res.proxyType == "2") {
			                that.link =
			                  "http://route.xiongmaodaili.com/xiongmao-web/selfControl/getIP?secret=" +
			                  that.secret +
			                  "&code=" +
			                  res.format +
			                  "&orderNo=" +
			                  res.appkey +
			                  "&type=1";
			              } else {
			                that.link =
			                  "http://route.xiongmaodaili.com/xiongmao-web/selfControl/getIP?secret=" +
			                  that.secret +
			                  "&code=" +
			                  res.format +
			                  "&orderNo=" +
			                  res.appkey +
			                  "&type=0";
			              }
			            } else {
			              commit("SET_APPLY", false);
			            }
			          })
			          .catch(() => {});
			      } else if (tar == 11) {
			        this.link =
			          "http://route.xiongmaodaili.com/xiongmao-web/api/xnip?secret=" +
			          that.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&count=" +
			          res.count +
			          "&isTxt=" +
			          res.format +
			          "&area=" +
			          res.cityIP +
			          "&removal=" +
			          res.isChong +
			          "&proxyType=" +
			          res.proxyType;
			        that.link = this.link;
			      } else if (tar == 6) {
			        this.link =
			          "http://route.xiongmaodaili.com/xiongmao-web/vip/madeToOrder?secret=" +
			          this.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&count=" +
			          res.count +
			          "&isTxt=" +
			          res.format;
			      } else if (tar == 7) {
			        let proxyType;
			        if (res.proxyType == 1) {
			          if (pol == 1) {
			            this.link =
			              "http://route.xiongmaodaili.com/xiongmao-web/cx/cxip?secret=" +
			              this.secret +
			              "&orderNo=" +
			              res.appkey +
			              "&isTxt=" +
			              res.format +
			              "&cityId=" +
			              res.city7 +
			              "&proxyType=" +
			              1;
			          }
			          if (pol == 2) {
			            this.link =
			              "http://route.xiongmaodaili.com/xiongmao-web/cx/cxip?secret=" +
			              this.secret +
			              "&orderNo=" +
			              res.appkey +
			              "&isTxt=" +
			              res.format +
			              "&cityId=" +
			              res.city72 +
			              "&proxyType=" +
			              1;
			          }
			          that.link = this.link;
			        } else if (res.proxyType == 2) {
			          if (pol == 1) {
			            this.link =
			              "http://route.xiongmaodaili.com/xiongmao-web/cx/madeToOrder?secret=" +
			              this.secret +
			              "&orderNo=" +
			              res.appkey +
			              "&isTxt=" +
			              res.format +
			              "&cityId=" +
			              res.city7 +
			              "&proxyType=" +
			              3;
			          }
			          if (pol == 2) {
			            this.link =
			              "http://route.xiongmaodaili.com/xiongmao-web/cx/madeToOrder?secret=" +
			              this.secret +
			              "&orderNo=" +
			              res.appkey +
			              "&isTxt=" +
			              res.format +
			              "&cityId=" +
			              res.city72 +
			              "&proxyType=" +
			              3;
			          }
			          that.link = this.link;
			        }
			      } else if (tar == 12) {
			        this.link =
			          "http://www.xiongmaodaili.com/xiongmao-web/vpn/getProxy?secret=" +
			          that.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&isTxt=" +
			          res.format +
			          "&province=" +
			          res.allprovince +
			          "&city=" +
			          res.allprovinceCity +
			          "&address=" +
			          res.address +
			          "&isOrder=" +
			          res.domainName;
			        that.link = this.link;
			      } else if (tar == 15) {
			        let provin = [];
			        let city = [];		
			        if (this.selectedOptionsThree != "") {
			          this.selectedOptionsThree.forEach((item) => {
			            provin.push(item[0]);
			            city.push(item[1]);
			          });
			          provin = [...new Set(provin)];
			          var str = "";
			          var strCT = "";
			          for (var i = 0; i < provin.length; i++) {
			            str += provin[i] + ",";
			          }
			          //去掉最后一个逗号(如果不需要去掉，就不用写)
			          if (str.length > 0) {
			            str = str.substr(0, str.length - 1);
			          }
			          for (var i = 0; i < city.length; i++) {
			            strCT += city[i] + ",";
			          }
			          //去掉最后一个逗号(如果不需要去掉，就不用写)
			          if (strCT.length > 0) {
			            strCT = strCT.substr(0, strCT.length - 1);
			          }
			        } else {
			          provin = [];
			          city = [];
			        }					
			        this.link =
			          "http://www.xiongmaodaili.com/xiongmao-web/apiPlus/vgl?secret=" +
			          this.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&count=" +
			          res.count +
			          "&isTxt=" +
			          res.format +
			          "&proxyType=" +
			          res.proxyType +
			          "&validTime=" +
			          res.isDate +
			          "&removal=" +
			          res.isChong +
			          "&provinceIds=" +
			          provin +
			          "&cityIds=" +
			          city;
			      } else {
			        this.link =
			          "http://route.xiongmaodaili.com/xiongmao-web/api/gbip?secret=" +
			          this.secret +
			          "&orderNo=" +
			          res.appkey +
			          "&count=" +
			          res.count +
			          "&isTxt=" +
			          res.format;
			      }		
			},
			//下拉框
			bindPickerChange: function(e) {	
				this.index = e.target.value
				this.jg=this.orderData[this.index]
			},
			listArea() {
				let that=this
				this.$store
					.dispatch("ListArea",{orderType:15})
					.then((response) => {
						if (response.data.code == "0") {
						    this.cityG=response.data.obj
						    this.apiPlusListThree = response.data.obj;
							this.getID(this.apiPlusListThree)
							this.items=this.apiPlusListThree
						}	
					})
					.catch(() => {});
			},
			getID(json){
				json.forEach(function(item) {
					item.text=item.label
					item.children.forEach((itm)=>{
						itm.text=itm.label
					})					
				});
			},
			listStaticCity(){
				let that=this
				that.cityData3=[{city:"随机分配",label:"随机分配",cityid:0}]
				this.$store
					.dispatch("ListStaticCity")
					.then((response) => {
						if (response.data.code == "0") {
						    let tar = response.data.obj;
							tar.forEach((item)=>{
								item.label=item.city
								that.cityData3.push(item)
							})
						}
					})
					.catch(() => {});
			},
			listCxCity(){
				let that=this
				that.cityData2=[{city:"随机分配",label:"随机分配",cityId:0}]
				this.$store
					.dispatch("ListCxCity")
					.then((response) => {
						if (response.data.code == "0") {
						    let tar = response.data.obj;							
						    tar.forEach((item)=>{
						    	item.label=item.city
						    	that.cityData2.push(item)
						    })
						}
					})
					.catch(() => {});
			},
			listXnArea(){
				let that=this
				this.$store
					.dispatch("ListXnArea")
					.then((response) => {
						if (response.data.code == "0") {
					          let tar =response. data.obj;
					          that.XnCity =response.data.obj;
					          that.XnCity02 = response.data.obj;
					    }		
					})
					.catch(() => {});
			},
			listUseableOrder(){
				let that=this
				this.$store
					.dispatch("ListUseableOrder")
					.then((response) => {
						if(response.data.code==0){
							let tar = response.data.obj;
							// 有数据
				            if (tar.length > 0) {
				              that.orderData = [];
				              let arr = ["", "按量", "免费试用", "不限量", "", "独享", "定制"];
				              // 遍历数组
				              tar.forEach((item) => {
				                if (
				                  item.type != 4 &&
				                  item.type != 3 &&
				                  item.type != 8 &&
				                  item.type != 11 &&
				                  item.type != 12 &&
				                  item.type != 7 &&
				                  item.type != 13 &&
				                  item.type != 14 &&
				                  item.type != 15
				                ) {
				                  that.orderData.push({
				                    label: item.orderNo,
				                    value: item.orderNo,
				                    ext: arr[item.type],
				                    type: item.type,
				                  });
				                }
				                if (item.type == 3) {
				                  if (item.poolType == 1) {
				                    that.orderData.push({
				                      label: item.orderNo,
				                      value: item.orderNo,
				                      ext: "不限量个人",
				                      type: item.type,
				                      pool: item.poolType,
				                    });
				                  }
				                  if (item.poolType == 2) {
				                    that.orderData.push({
				                      label: item.orderNo,
				                      value: item.orderNo,
				                      ext: "不限量企业",
				                      type: item.type,
				                      pool: item.poolType,
				                    });
				                  }
				                  if (item.poolType == 3) {
				                    that.orderData.push({
				                      label: item.orderNo,
				                      value: item.orderNo,
				                      ext: "不限量极速版",
				                      type: item.type,
				                      pool: item.poolType,
				                    });
				                  }
				                }
				                if (item.type == 7) {
				                  if (item.poolType == 1) {
				                    that.orderData.push({
				                      label: item.orderNo,
				                      value: item.orderNo,
				                      ext: "长效(24小时)",
				                      type: item.type,
				                      pool: item.poolType,
				                    });
				                  }
				                  if (item.poolType == 2) {
				                    that.orderData.push({
				                      label: item.orderNo,
				                      value: item.orderNo,
				                      ext: "长效(静态IP)",
				                      type: item.type,
				                      pool: item.poolType,
				                    });
				                  }
				                }
				                if (item.type == 11) {
				                  that.orderData.push({
				                    label: item.orderNo,
				                    value: item.orderNo,
				                    ext: "虚拟",
				                    type: item.type,
				                    pool: item.poolType,
				                  });
				                }
				                if (item.type == 12) {
				                  that.orderData.push({
				                    label: item.orderNo,
				                    value: item.orderNo,
				                    ext: "全局",
				                    type: item.type,
				                    pool: item.poolType,
				                  });
				                }
				                if (item.type == 15) {
				                  this.poolType=item.poolType
				                  that.orderData.push({
				                    label: item.orderNo,
				                    value: item.orderNo,
				                    ext: "包量套餐(升级版)",
				                    type: item.type,
				                    pool: item.poolType,
				                  });
				                }
								if(that.orderData.length<1){
									that.orderData.push({label:"未购买订单",value:-1})
								}
				              });
				            }
				            // 无数据
				            else {
				              that.noorder = true;
				            }
							
						}
					})
					.catch(() => {});
			}
		},
	}
</script>

<style lang="less">
#getIp{	
	.getApi2{
		font-size: 24rpx;
		.copy_t{
			background-color: #f1fae7;
			padding: 20rpx 0 20rpx 30rpx;
			color: #336901;
		}
		.content{
			margin: 0rpx 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #525252;
			background: #f7f7f8;
			textarea{
				width: 100%;
				font-size: 26rpx;
				box-sizing: border-box;
				min-height: 280rpx;
				padding: 10rpx;
			}		
		}
		.btn{
			margin-top: 40rpx;
			button{
				border-radius: 100rpx;
				width: 40%;
				margin: 0 auto;
				margin-bottom: 20rpx;
				background: #007AFF;
				color: #FFFFFF;
			}
		}
	}
	.getApi{
		width: 92%;
		margin: 0 auto;
		.item{
			margin-top: 30rpx;
			// font-size: 24rpx !important;
			.easy-select{
				border: none;
				font-size: 24rpx !important;
				// color: red;
				position: relative;
				top: 20rpx;
				input{
					font-size: 24rpx !important;
				}
			}
		}
		.title{
			display: inline-block;
			width: 200rpx;
		}
		select{
			width: 100%;
			border: none;
			text-align: right;
		}
		.input{
			width: 100rpx;
			display: inline-block;
		}
		.block{
			display: inline-block;
			height: 48rpx;
			line-height: 48rpx;			
			overflow: hidden;
			padding: 0 10rpx;
			input{
				display: inline-block;
				width: 60rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
			}
		}
		.iblock{
			width: 470rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			text-align: right;
			display: inline-block;
			.numberBox{
				width: 460rpx;
				text-align: right;
				justify-content: flex-end;
				.uni-numbox__value, .uni-input-input{
					width: 300rpx;
				}
			}
		}
		.iblock2{
			box-sizing: border-box;
			padding-left: 10rpx;
			text-align: left;
		}
		.reduce, .add{
			width: 25rpx;
			text-align: center;
			font-weight: 700;
			color: #666;
			letter-spacing: 0;
			background-color: #C0C0C0;
		}
		.item-picker {
		    margin-top: 30rpx;
		    height: 60rpx !important;
		    border: 2rpx solid #EDEDED;
			padding-left: 30rpx;
			input{
				height: 60rpx;
			}
		}
		.btn{
			width: 92%;
			position: fixed;
			bottom: 110rpx;
			button{
				width: 80%;
				margin: 0 auto;
				background: #007AFF;
				color: #FFFFFF;
			}
		}
	}

}
</style>

